// 当前交易，历史交易
import React, { useState, useEffect } from "react";
import { Button, Pagination  } from "antd";
import { useTranslation } from "react-i18next";

import logoIcon from "../../../../assets/images/home/img4.png";
import greenRightArrowIcon from '../../../../assets/images/dapp/green_right_arrow.png'
import downTransArrowIcon from '../../../../assets/images/dapp/down_trans_arrow.png'

const DealRecords = ({ type }) => {
  const { t, i18n } = useTranslation();
  const [recordType, setRecordType] = useState(0); // 0-当前交易，1-历史交易
  const [recordList, setRecordList] = useState([]); // 交易记录列表
  const [walleteConnect, setWalleteConnect] = useState(false); // 钱包是否连接

  useEffect(() => {
    console.log("type", type);
    setRecordType(type);

    if (type == 0) {
      // 当前交易
      setWalleteConnect(false)
      setRecordList([]);
    } else {
      let data = [
        {
          type: 0, //0-申购，1-赎回
          time: "2021-05-12 12:00:00",
          percent: "3/21",
          usdt: "32000.0000000000000",
          esdt: '32.0000000000',
          code: "0xx3cd…xu8dn8",
          coin: "USDT",
          toCoin: "ESDT"
        },
        {
          type: 0, //0-申购，1-赎回
          time: "2021-05-12 12:00:00",
          percent: "3/21",
          usdt: "32000.0000000000000",
          esdt: '32.0000000000',
          code: "0xx3cd…xu8dn8",
          coin: "USDT",
          toCoin: "ESDT"
        },
      ];
      setWalleteConnect(true)
      setRecordList([...data]);
    }
  }, [type]);

  useEffect(() => {
    console.log("recordList", recordList);
  }, [recordList]);

  return (
    <div className="deal-records-comp">
      {walleteConnect ? (
        <div className="records-box">
          {recordList && recordList.length > 0 ? (
            <div className="records-data">
              <div className="list-box">
                {recordList.map((item, index) => {
                  return (
                    <div className="record-item" key={index}>
                      <div className="item-title">
                        <div className="title-left">
                            <div className="type-text">{t('dappDeal.tabSubscribe')}</div>
                            <div className="time-text">{item.time}</div>
                        </div>
                        <div className="title-right">
                          <div className="percent-text">{item.percent}</div>
                          <div className="status-text">{t('dappDeal.status')}</div>
                        </div>
                      </div>
                      <div className="value-box">
                        <img className="pre-icon" src={downTransArrowIcon} />
                        <div className="row-data">
                            <div className="row-item">
                                <div className="item-label">
                                    {item.coin}: 
                                </div>
                                <div className="item-value">
                                    {item.usdt}
                                </div>
                            </div>
                            <div className="row-item">
                                <div className="item-label">
                                    {item.toCoin}: 
                                </div>
                                <div className="item-value">
                                    {item.esdt}
                                </div>
                            </div>
                        </div>
                      </div>

                      <div className="code-box">
                        <img className="pre-icon" src={greenRightArrowIcon}/>
                        <div className="code-text">{item.code}</div>
                      </div>
                    </div>
                  );
                })}
              </div>
              <div className="pagination-box">
              <Pagination size="small" total={50} />

              </div>
            </div>
          ) : (
            <div className="no-records">暂无交易记录</div>
          )}
        </div>
      ) : (
        <div className="connect-wallete-box">
          <img className="icon-img" src={logoIcon} />
          <Button className="connect-btn">{t("dappDeal.linkWallet")}</Button>
          <div className="tip-text">{t("dappDeal.linkWalletTips")}</div>
        </div>
      )}
    </div>
  );
};

export default DealRecords;
